import React, { useEffect, useState } from "react";
import "./warrdetails.less";
import { Link, useLocation,history } from "umi";
import { Breadcrumb, Steps, Button } from "antd";
import axios from "axios";
import dayjs from "dayjs"
export default function Warrdetails() {
  useEffect(() => {
    getdetails();
  }, []);
  //接收history的参数
  let location = useLocation();
  const params = new URLSearchParams(location.search);
  const id = params.get("id");
  let [obj, setobj] = useState({});
  let getdetails = async () => {
    let {
      data: { code, obj },
    } = await axios.get(`http://localhost:3000/warrdeatil?id=${id}`);
    if (code === 200) {
      setobj(obj);
      console.log(obj);
    }
  };

  return (
    <div className="bigbox">
      <div className="header">
        <div className="header1">
          <Breadcrumb
            items={[
              {
                title: "物业服务",
              },
              {
                title: <Link to="/warranty">保修管理</Link>,
              },
              {
                title: "报修详情",
              },
            ]}
          />
          <h2>报修详情</h2>
        </div>
      </div>
      <div className="content1">
        <div className="content1_1">
          <p>维修流程</p>
          <div style={{ marginTop: "50px" }}>
            <Steps
              progressDot
              current={2}
              items={[
                {
                  title: "已提交",
                  description: "已成功提交申请",
                },
                {
                  title: "正在审核",
                  description: "申请正在审核中...",
                },
                {
                  title: obj.wxzt === 1 ? "审核通过" : "审核未通过",
                  description: obj.wxzt === 1 ? "预约成功" : "预约失败",
                },
              ]}
            />
          </div>
        </div>
      </div>
      <div className="content2">
        <div className="content2_1">
          <p>报修信息</p>
          <p className="details_p">
            <span>报修房屋：{obj.bxfw}</span> <span>维修项目：{obj.wxxm}</span>
            <span>标题：{obj.ts}</span>
          </p>
          <p className="details_p"><span>问题描述</span><span>手机号码：16589000078</span><span>预约日期：{dayjs(obj.date).format("YYYY-MM-DD")}</span></p>
          <p className="details_p"><span>报修人：{obj.bxr}</span><span>预约日期：{dayjs(obj.date).format("YYYY-MM-DD")}</span><span>提交人：One</span></p>
        </div>
      </div>
      <div className="content3">
        <div className="content3_1">
            <p>审核</p>
            <p style={{display: "flex"}}><span>审核意见</span>：<textarea name="" id="" cols="30" rows="6" placeholder="请输入审核意见" style={{fontSize:'16px'}}></textarea></p>
            <Button onClick={()=>history.back()}>返回上一页</Button>
        </div>
      </div>
    </div>
  );
}
